<template>
    <div class="rechargecon">
        <ul class="pinfo">
            <li><span>账户</span> <strong>73732476632@qq.com</strong></li>
            <li><span>账户余额</span> <strong class="red">75元</strong></li>
        </ul>
        <div class="moneychose clearfix">
            <h6><span>充值金额</span>
                <icon name="right" scale="60" class="icon_right"></icon>
            </h6>
            <dl>
                <dd @click="selectmoney(index)" :key="index" :class="selectindex===index?'active':'null'"
                    v-for="(item, index) in moneys">
                    {{item.value}}
                </dd>
                <dd :class="selectindex===-1?'activeinput':'null'"><label>
                    <input @focus="setmoneyvalue" placeholder="请输入金额" name="money" v-model="amount">
                </label></dd>
            </dl>
        </div>

        <div class="paytypes">
            <h6>充值方式 <span>支付完成后点击左上角app名返回</span></h6>
            <ul v-if="payselect.length>0">
                <li v-for="(item, index) in payselect" @click="setpaytypes(index)">
                    <img :src="item.Icon" alt="item.Name">
                    <span>
                        <strong>{{item.Name}}</strong>
                        <b>{{item.SubTitle}}</b>
                    </span>
                    <em>
                        <icon v-if="payselectindex===index" name="selected" scale="3"></icon>
                        <icon v-else name="select" scale="3"></icon>
                    </em>
                </li>
            </ul>
        </div>
        <div class="btoombtn">
            <p>充值金额不可提现只能用于购彩，中奖后奖金可以提现。</p>
            <button class="submit">
                <icon name="loading" scale="2.5" spin></icon>
                <span>立即充值</span>
            </button>
        </div>
    </div>

</template>

<script>
//    import Vue from 'vue'
    const payselect = [
        {
            "ID": 1,
            "Code": "XXP_ZFB",
            "Name": "支付宝",
            "OrderNo": 2,
            "Title": "小小贝-支付宝",
            "SubTitle": "无手续费，单日限额5万",
            "Icon": "//common-1253410441.costj.myqcloud.com/coverimg/20170601184552.png"
        },
        {
            "ID": 2,
            "Code": "WFT_WX",
            "Name": "微信",
            "OrderNo": 0,
            "Title": "威富通-微信",
            "SubTitle": "快捷方便，极速到账",
            "Icon": "//common-1253410441.costj.myqcloud.com/coverimg/20170601184553.png"
        }
    ];
    const moneys = [
        {money: 20, value: '20元', index: 1},
        {money: 50, value: '50元', index: 2},
        {money: 100, value: '100元', index: 3},
        {money: 500, value: '500元', index: 4},
        {money: 1000, value: '1000元', index: 5}];
    export default {
        data() {
            return {
                moneys: moneys,
                payselect,
                amount: 0,
                selectindex: -1,
                payselectindex: 0
            }
        },
        methods: {
            setpaytypes(index){
                this.payselectindex = index;
            },
            setmoneyvalue(){
                this.selectindex = -1
            },
            console(msg) {
                console.log(msg)
            },
            selectmoney(i){
                this.selectindex = i;
            },


            menuclick(key) {
                console.log(key)
            },

        },
        created() {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    @import "../../common";

    .rechargecon {
        .pinfo {
            font-size: 16px;
            background: #fff;
            padding: 0 10px;
            margin-bottom: 10px;
            li {
                height: 55px;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid @color12;
                &:last-child {
                    border-bottom: none;
                }
                span {
                    flex: 1;
                }
                strong {
                    color: @color2;
                }
                .red {
                    color: @color6;
                }
            }
        }
        .moneychose {
            font-size: 16px;
            padding: 15px 12px;
            background: #fff;
            h6 {
                display: flex;

            }
            .icon_right {
                color: @color3;
            }
            span {
                flex: 1;
                font-weight: normal;
                font-size: 16px;
            }
            dl {
                width: 400px;
                dd {
                    width: 100px;
                    height: 33px;
                    border: 1px solid #e0e0e0;
                    border-radius: 2px;
                    box-sizing: border-box;
                    display: flex;
                    float: left;
                    justify-content: center;
                    align-items: center;
                    margin: 18px 25px 0 0;
                    &.active {
                        border-color: @color6;
                        color: @color6;
                        position: relative;
                        &::after {
                            content: ' ';
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            background: url(//common-1253410441.file.myqcloud.com/coverimg/20170609133129.png) no-repeat;
                            background-size: contain;
                            width: 20px;
                            height: 20px;
                        }
                    }
                    &.activeinput {
                        border-color: @color6;
                        color: @color6;
                        input {
                            color: @color6;
                        }
                    }
                    input {
                        border: none;
                        font-size: 14px;
                        width: 100%;
                        height: 30px;
                        text-align: center;
                    }
                }
            }
        }
        .paytypes {
            margin-top: 9px;
            background: #fff;
            padding: 15px 12px;
            margin-bottom: 70px;
            h6 {
                font-size: 16px;
                span {
                    font-size: 12px;
                    margin-left: 8px;
                    color: @color3;
                }
            }
            ul {
                li {
                    display: flex;
                    height: 71px;
                    border-bottom: 1px solid @color12;
                    justify-content: center;
                    align-items: center;
                    &:last-child {
                        border-bottom: none;
                    }
                    img {
                        width: 40px;
                        height: 40px;
                        margin-right: 15px;
                    }
                    span {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        strong {
                            font-size: 18px;
                        }
                        b {
                            font-size: 13px;
                            color: @color3;
                        }

                    }
                }
            }
        }
        .btoombtn {
            position: fixed;
            bottom: 0;
            width: 100%;
            p {
                background: #fff9c3;
                color: #fbb52f;
                text-indent: 10px;
                height: 32px;
                display: flex;
                align-items: center;
                font-size: 12px;
            }
            button {
                height: 44px;
                width: 100%;
                box-sizing: border-box;
                background: @color6;
                display: flex;
                border: none;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 18px;
            }
        }
    }

</style>
